<template>
  <!-- 系统使用明细 -->
  <div class="sysUsage">
    <ContentWrap>
      <!-- <div class="button-container" style="padding-top:0">
        <Button type="primary" @click="$router.go(-1)">返回</Button>
      </div> -->
      <FormContainer :column="3">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item
            prop="disCode"
            label="经销商名称"
          >
            <OfficeOrDealerSelect v-model="formData.disCode" :api-func="pageDealer" :obj="{value:'disCode',name:'disName'}" :others-raw="{agencyCode: formData.agencyCode}" :time="formData.times" :disabled="disabled" placeholder="请选择经销商" filterable clearable></OfficeOrDealerSelect>
          </el-form-item>
          <el-form-item prop="times" label="日期">
            <el-date-picker
              v-model="formData.times"
              type="daterange"
              value-format="yyyy-MM-dd"
              opt
              operator=">"
              :limite="new Date()"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="timesHandle"
            />
          </el-form-item>
          <el-form-item>
            <Button @click="$refs.form.resetFields()">重置</Button>
            <Button type="primary" enter @click="queryHandle">查询</Button>
            <Button @click="cancel">返回</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div class="button-container" style="padding-top:0">
        <ExportPane :table-config="tableConfig" :other-raw="otherRaw" :data-source="selectedAry" :query-data-fun="queryHandle" filename="系统使用明细">导出</ExportPane>
      </div>
      <table-box
        ref="table"
        class="checkbox_table"
        no-request
        :table-config="tableConfig"
        :other-filters="otherFilters"
        :other-raw="otherRaw"
        @selection-change="selectionChange"
        @data-change="loading=false"
      >
        <el-table-column slot="before" type="selection" width="55"></el-table-column>
        <el-table-column slot="before" type="index" label="序号" width="55"></el-table-column>
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import ExportPane from '@/components/ExportPane'
import OfficeOrDealerSelect from '../components/officeOrDealerSelect'
import { pageDealer } from '@/api/serviceQuality'
import { checkRange } from '@/utils'
export default {
  name: 'SysUsageDetail',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    ExportPane,
    OfficeOrDealerSelect
  },
  data() {
    const validatorTimes = (r, v, c) => {
      if (v instanceof Array && v.length === 2) {
        // 不超过三个月
        if (checkRange()(v)) {
          c()
        } else {
          c(new Error('日期跨度不能大于三个月'))
        }
      } else {
        c(new Error('请选择日期'))
      }
    }
    return {
      pageDealer,
      loading: false,
      otherFilters: [],
      otherRaw: {},
      formData: {
        agencyCode: this.$route.query.agencyCode,
        disCode: '',
        times: []
      },
      formRules: {
        times: [
          { required: true, message: '请选择日期', trigger: 'change' },
          { validator: validatorTimes, trigger: 'change' }
        ]
      },
      tableConfig: {
        interfacePath: '/call-center/api/v1/reportSystemUse/detailPage',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段动态配置
        setting: [
          {
            prop: 'agencyCode',
            label: '办事处编码',
            width: 110
          },
          {
            prop: 'agencyName',
            label: '办事处'
          },
          {
            prop: 'disCode',
            label: '经销商编码',
            width: 110
          },
          {
            prop: 'disName',
            label: '经销商名称'
          }, {
            prop: 'businessStatus',
            label: '经销商经营状态',
            minWidth: 140,
            propEnum: {
              appCode: 'call-center',
              domainCode: 'marketing',
              dictTypeCode: 'BUSINESS_STATUS'
            }
          },
          {
            prop: 'isUse',
            label: '是否使用系统'
          },
          {
            prop: 'staffNum',
            label: '技师人数'
          }
        ]
      },
      selectedAry: []
    }
  },
  computed: {
    disabled() {
      return !(this.formData.times instanceof Array && this.formData.times.length === 2 && checkRange()(this.formData.times))
    }
  },
  created() {
    const query = this.$route.query
    const otherRaw = {}
    if (query.time1 && query.time2) {
      this.$set(this.formData, 'times', [query.time1, query.time2])
      otherRaw.startDate = query.time1
      otherRaw.endDate = query.time2
    }
    if (query.agencyCode) {
      otherRaw.agencyCode = query.agencyCode
    }
    this.otherRaw = otherRaw
  },
  mounted() {
    // console.log(this.$route)
  },
  methods: {
    // 查询
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        const list = []
        const otherRaw = {}
        for (const [k, v] of Object.entries(this.formData)) {
          if (v === undefined || v === null || v === '' || (v instanceof Array && v.length <= 0)) {
            continue
          }
          if (k === 'times') {
            otherRaw.startDate = v[0]
            otherRaw.endDate = v[1]
          } else {
            // list.push(filtersRaw(k, v, '='))
            otherRaw[k] = v
          }
        }
        this.otherRaw = otherRaw
        this.otherFilters = list
        if (type !== 'export') {
          this.refreshTable()
        }
        return list
      })
    },
    // 刷新表格
    refreshTable(type) {
      this.$nextTick(() => {
        this.$refs.table.initTableData(type)
      })
    },
    // 日期变化
    timesHandle(v) {
      const otherRaw = {}
      if (v instanceof Array && v.length === 2) {
        otherRaw.startDate = v[0]
        otherRaw.endDate = v[1]
      }
      this.otherRaw = otherRaw
    },
    // 返回
    cancel() {
      this.$closePage()
    },
    // 表格选中事件
    selectionChange(val) {
      this.selectedAry = val
    }
  }
}
</script>
<style lang='scss' module>
</style>
